<template>
  <view class="container">
    <u-navbar border placeholder title="商品详情" @leftClick="backShop"></u-navbar>
    <!-- 顶部产品图 -->
    <view class="top_img_box">
      <image class="img" mode="aspectFill" :src="`${baseUrl}/images/audi/library/${goodsDetail.images_kv}`"></image>
    </view>
    <!-- v-if="Object.keys(goodsDetail).length" -->
    <view class="info_box">
      <view :class="['card', 'price_info',
        isGroupPurchase ? 'price_box--group' : 'price_box']">
        <view class="price">
          <view class="word" v-if="isPrepaidPrice">{{ isGroupPurchase ? '团购价' : '活动价' }}</view>
          <view class="text"><text class="te">￥</text>{{ goodsDetail.present_price }}</view>
        </view>
        <view class="prepaid_price" v-if="isPrepaidPrice">
          <view class="num">预付订金￥{{ goodsDetail.prepaid_price | moneyShow }} </view>
        </view>
        <view class="original_box" v-if="!isPrepaidPrice && showOriginalprice">
          <view class="num"> ￥{{ showOriginalprice }} </view>
          <view class="word">{{ isGroupPurchase ? '团购价' : '活动价' }}</view>
        </view>
        <view class="count-down" v-if="isGroupPurchase">
          <view class="count-down__title" v-if="finishTime > 0">活动截止倒计时</view>
          <!-- <view class="count-down__tips" v-if="true"
            >团购活动已截止</view
          > -->
          <!-- {{ finishTime }} -->
          <view class="count-down__tips" v-if="finishTime <= 0">团购活动已截止</view>
          <u-count-down v-else autoStart millisecond format="DD:HH:mm:ss" @change="onChange" :time="finishTime">
            <view class="time">
              <view class="time__custom">
                <!-- <text class="time__custom__item">{{
                  timeData.days
                }}</text> -->
                <text class="time__custom__item">{{
                  timeData.days > 10 ? timeData.days : '0' + timeData.days
                }}</text>
              </view>
              <view class="time__custom">
                <text class="time__custom__item">{{
                  timeData.hours > 10 ? timeData.hours : '0' + timeData.hours
                }}</text>
              </view>
              <view class="time__custom">
                <text class="time__custom__item">{{ timeData.minutes }}</text>
              </view>
              <view class="time__custom">
                <text class="time__custom__item">{{ timeData.seconds }}</text>
              </view>
            </view>
          </u-count-down>
        </view>
      </view>
      <view class="card card-btm-radius">
        <view class="title">
          {{ goodsDetail.shop_title || '' }}
        </view>
        <view class="server">商品类型：<text class="server_post">{{
          goodsDetail.post_service == 4 ? '礼包卡劵' : '实体商品'
        }}</text>
          <text v-if="isGroupPurchase" class="server_post">团购</text>
          <text class="server_post" v-if="goodsDetail.post_service == 1">包邮</text>
        </view>
        <view class="server" v-if="isPrepaidPrice && showOriginalprice">商品原价：<text>￥{{
          goodsDetail.original_price | moneyShow
        }}</text>
        </view>
        <view class="server">合适车型：{{ showCar }}</view>
        <view class="coupon_box" v-if="couponList.length">
          <view class="coupon_title">礼包券：</view>
          <view class="coupon_info">
            <view class="content" :key="item.id" v-for="item in couponList">
              <text decode>{{ item.couponName }},{{ '&emsp;' }} </text>
              <text decode>有效期:{{ item.month }} (月),{{ '&emsp;' }} </text>
              <text decode>数量:{{ item.quantity }} (张){{ '&emsp;' }} </text>
            </view>
          </view>
        </view>
        <view class="server" v-if="isLimitNum">限购数量：{{ goodsDetail.limit_num_max }}</view>
        <view class="prepaid-price" v-if="isPrepaidPrice">*提示：支付订金后，余额到店支付即可。</view>
        <callup-or-navigation topBorder @popupOper="popupOper" :currCompa="currCompa" />
      </view>
    </view>
    <!-- 倒计时 -->
    <view class="schedule" v-if="isGroupPurchase">
      <view class="schedule__title">团购进度 看看伙伴的力量</view>
      <u-line-progress :showText="false" activeColor="#feb228" inactiveColor="#feedd8"
        :percentage="percentage"></u-line-progress>
      <view class="schedule__data">
        <view class="schedule__data__num">
          最低折扣需 {{ goodsDetail.buyers_num_max }} 人
        </view>
        <view class="schedule__data__num">
          已参团 {{ goodsDetail.buyers_num_custom + goodsDetail.buyers_num }} 人
        </view>
        <view class="schedule__data__num"> 进度 {{ percentage }} % </view>
      </view>
      <view class="schedule__date">
        团购活动时间截止:{{ goodsDetail.finish_time }}</view>
    </view>
    <!-- 产品视频 -->
    <view class="video_box" v-if="!!goodsDetail.video" :class="{ 'top-40': !isGroupPurchase }">
      <video autoplay controls id="myVideo" :muted="true" page-gesture show-mute-btn vslide-gesture class="videoSytle"
        :src="`${baseUrl}/images/audi/library/${goodsDetail.video}`"></video>
    </view>
    <!-- 商品详情介绍 -->
    <view class="parse_box" :class="{ 'top-40': !isGroupPurchase }">
      <!-- 不需要引入，可直接使用 -->
      <view style="padding: 15rpx 20rpx;">
        <mp-html :content="remarks" />
      </view>
      <!-- <mp-html :content="goodsDetail.remarks" /> -->
      <image :key="item.id" :src="item.src" mode="widthFix" style="display: block" v-for="item in goodsImgList">
      </image>
    </view>
    <u-divider text="这是我的底线"></u-divider>
    <!-- 底购买按钮 -->
    <view style="height: 130rpx"></view>
    <view class="bottom-btn" v-if="isShow">
      <view class="bottom-btn__share" @click="clickShare">
        <uni-icons type="redo" size="32rpx"></uni-icons>
        <view>分享</view>
      </view>
      <view v-if="goodsDetail.shop_num < 1" class="bottom-btn__end">
        已售罄
      </view>
      <view class="bottom-btn__end" v-else-if="goodsDetail.state && goodsDetail.state != 1">
        活动已结束
      </view>
      <template v-else>
        <view class="bottom-btn__addCar" @click="addCars">加入购物车 </view>
        <view class="bottom-btn__purchase" @click="onPurchase">{{ isPrepaidPrice ? "立刻付订金" : '立即购买' }} </view>
      </template>
    </view>

    <!-- 客服按钮 -->
    <!-- :class="{ contactPostion: postiBtm }" -->
    <view class="Contact" @click="callSevise" v-if="Object.keys(serviceInfo).length">
      <i class="iconfont2 icon-kehufuwukefu"></i>
      <p class="text">客服</p>
    </view>
    <!-- 客户成交 -->
    <view class="swiper-wrap" :hidden="!isShow">
      <view class="mask"></view>
      <swiper class="swiper" autoplay vertical circular :interval="1200" :style="{ height: swiperHeight }"
        :display-multiple-items="boxItmeLen" duration="500">
        <swiper-item :key="v.id" v-for="v in boxItme">
          <view class="item-box">
            <view class="img-box">
              <image class="img" :src="v.u" mode="aspectFit" />
            </view>
            <view class="text"> {{ v.ph }}, 用户支付了订单！ </view>
          </view>
        </swiper-item>
        <swiper-item v-if="swiperListLen === 1">
          <view class="item-box hide">
            <view class="img-box">
            </view>
            <view class="text"> 占位 </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 商品分享 -->
    <poster-goods v-if="isCreate" ref="canvas" :posterInfo="posterInfo" :phone="`联系方式: ${currCompa.sale_hotline}`" />
    <!-- imageBody="https://www.kamlung.net/images/audi/qr/bg_qr.jpg" -->
    <!-- 客服名片组件 -->
    <u-popup round="5" closeable :show="show" mode="center" bgColor="#f5f6f8" @close="show = false"
      :safeAreaInsetBottom="false">
      <view class="popup_inner">
        <PosterCanvas ref="mycanvas" :posInfo="posInfo"></PosterCanvas>
      </view>
    </u-popup>
    <!-- 分享组件 -->
    <van-share-sheet :overlay="false" :show="showShare" @select="selectShare" @cancel="cancelShare"
      :options="shareOptions" />
    <UserLoginModal costomBack ref="openLogin" @loginSuccss="setSharInfo"></UserLoginModal>
  </view>
</template>
<script>
import {
  wxUrApi,
  getklmxxApi,
  goodsDetailApi,
  codeGoodsQRApi,
  goodsCarListApi, //商品车型列表
  getShopTypeCateListApi
} from '@/API/Shop'
import { mapState, mapGetters, mapMutations } from 'vuex'
import { changeUrl, formatRichText } from '@/utils/utils'
import PosterGoods from '@/Shop/components/PosterGoods.vue'
import CallupOrNavigation from '@/Shop/components/CallupOrNavigation'
export default {
  name: 'GoodsDetail',
  components: {
    PosterGoods,
    CallupOrNavigation
  },
  data() {
    return {
      cOrId: {},
      posterInfo: {},
      couponList: [],
      finishTime: 0,
      timeData: {},
      isShow: true,
      remarks: '',
      isCreate: false,
      showShare: false,
      shareOptions: [
        {
          name: '转发微信好友',
          openType: 'share',
          icon: 'https://www.kamlung.net/images/other/share-sheet-wechat.png'
        },
        {
          name: '保存图片分享',
          icon: 'https://www.kamlung.net/images/other/share-img-dow.png'
        }
      ],
      baseUrl: this.$baseUrl,
      goodsDetail: {},
      goodsImgList: [],
      posInfo: {},
      show: false,
      goodsId: 0,
      // postiBtm: false
      boxItme: [],
    }
  },
  computed: {
    // 商品信息
    compuGoodsDetail() {
      let goodsDetail = this.goodsDetail
      return goodsDetail
    },
    swiperListLen() {
      return this.boxItme.length
    },
    boxItmeLen() {
      let len = this.swiperListLen
      return len === 1 ? 1 : ((1 < len && len < 6) ? len - 1 : 5)
    },
    swiperHeight() {
      let len = this.swiperListLen
      return len === 1 ? '50rpx' : (len < 6 ? len * 40 - 30 + 'rpx' : '210rpx')
    },
    // 当前客服信息
    serviceInfo() {
      let serviceList = this.compuGoodsDetail?.cu_service || []
      if (!serviceList.length) return {}
      let temp = serviceList.find((item) => item.company_id == this.currComInfo.id)
      return temp || serviceList[0]
    },
    // 是显示原价？
    showOriginalprice() {
      let { present_price, original_price } = this.compuGoodsDetail
      if (present_price != original_price) {
        return original_price
      }
      return 0
    },
    // 是付订金
    isPrepaidPrice() {
      let { prepaid_price } = this.compuGoodsDetail
      if (prepaid_price && prepaid_price != '0') return prepaid_price
      return 0
    },
    // 是否团购
    isGroupPurchase() {
      let { buyers_num_max } = this.compuGoodsDetail
      return buyers_num_max && buyers_num_max > 0
    },
    // 是否限制数量
    isLimitNum() {
      let { limit_num_max } = this.compuGoodsDetail
      return limit_num_max && limit_num_max > 0
    },
    // 百份比
    percentage() {
      let {
        buyers_num = 0,
        buyers_num_max = 1,
        buyers_num_custom = 0,
      } = this.compuGoodsDetail
      return Math.floor(
        ((buyers_num_custom + buyers_num) / buyers_num_max) * 100
      )
    },
    // 公司信息
    currCompa() {
      let centers = this.centers
      let temp = centers.find(item => item.id == this.currComInfo.id)
      return temp
    },
    // 车型列表
    ...mapState([
      'centers',
      'brandInfo',// 品牌信息
      'loginInfo',
      'goodsOrder',
      'centersList',
      'shopComList',
      'shopComIndex',
      'carModelDataList',
      'onOff',
      'pathLink'
    ]),
    ...mapGetters(['currComInfo']),
    // 显示车型
    showCar() {
      let carId = this.goodsDetail?.ve_id
      if (!carId) return ''
      let carModelList = this.carModelDataList
      if (!carModelList.length) return ''
      let idArr = carId.split(',')
      let tempArr = []
      for (let i = 0; i < idArr.length; i++) {
        for (let j = 0; j < carModelList.length; j++) {
          if (idArr[i] == carModelList[j].vem_vid) {
            tempArr.push(carModelList[j].vem_name)
            break
          }
        }
      }
      return tempArr.join(' , ')
    }
  },
  methods: {
    async getGoodsDetail(id, c) {
      const {
        data: { data, code }
      } = await goodsDetailApi({ id })
      if (code === 200) {
        data.present_price = this.$options.filters.moneyShow(data.present_price)
        this.goodsDetail = data
        let {
          cus_num,
          finish_time,
          coupon_list,
          shop_title,
          images_kv,
          // buyers_num_max,
          images_library
        } = data
        if (cus_num != null) {
          this.fetchWxUr({ i: id, n: cus_num })
        }
        console.log('data', data)
        // 券
        if (coupon_list) {
          this.couponList = JSON.parse(coupon_list)[0]?.coupons || []
        }
        // 详情图片
        let base = `${this.baseUrl}/images/audi/library/`
        if (images_library) {
          let temp = images_library?.split(';') || []
          this.goodsImgList = temp.map((item, index) => ({
            id: index + 1,
            src: `${base}${item}`
          }))
        }
        // let finishTime = `${finish_time} 00:00:00`
        // this.finishTime = new Date(finishTime).getTime() - new Date().getTime()
        this.finishTime = new Date(finish_time).getTime() - new Date().getTime()
        if (data.remarks) {
          // 处理富文本
          this.remarks = formatRichText(data.remarks)
        }
        this.shareMixin.title = `${shop_title}`
        this.shareMixin.imageUrl = `${base}${images_kv}`
        // 设置登录信息
        this.setSharInfo()
      }
    },
    // 点击分享
    async clickShare() {
      // 是否登录
      if (!Object.keys(this.loginInfo).length) {
        this.$refs.openLogin.isShow()
        return false
      }
      let { telphone = '', company_id } = this.loginInfo
      let { id: com_id, company_name, address } = this.currComInfo
      // 设置登录信息
      this.setSharInfo()
      let param = null
      let { brand } = this.brandInfo
      let { id, v_id, shop_title, present_price, images_kv } = this.compuGoodsDetail

      if (telphone && telphone != 'null' && com_id == company_id) {
        param = { id, v_id, brand, telphone, company_id: com_id }
      } else {
        param = {
          id,
          v_id,
          brand,
          company_id: com_id,
          telphone: null
        }
      }

      const {
        data: { data, code }
      } = await codeGoodsQRApi(param)
      console.log('分享海报', data)
      if (code == 200) {
        setTimeout(() => {
          this.$refs.canvas.canvasGet()
        }, 700)
        let base = this.baseUrl
        this.posterInfo = {
          titleRank: company_name,
          comAddress: address,
          price: present_price,
          textHead: shop_title,
          prepaid: this.isPrepaidPrice,
          imageBody: `${base}/${data}`,
          imageHead: `${base}/images/audi/library/${images_kv}`,
        }
        this.isCreate = true
        this.showShare = true
      }
    },
    // 设置登录信息
    setSharInfo() {
      let { id } = this.currComInfo
      let { c, goodsId } = this.cOrId
      let { telphone = '', company_id } = this.loginInfo
      // console.log('登录信息:>> ', this.loginInfo);
      // console.log('当前公司信息:>> ', this.currComInfo);
      if (telphone !== '' && (company_id == id)) {
        this.shareMixin.query = `id=${goodsId}&p=${telphone}&c=${c}`
      } else {
        this.shareMixin.query = `id=${goodsId}&p=null&c=${c}`
      }
    },
    // 统计通过分享进入商品详情页
    async getklmxxFn(param) {
      const res = await getklmxxApi(param)
    },
    // 用户成交
    async fetchWxUr(param) {
      const { data: { code, data } } = await wxUrApi(param)
      let baseUrl = `${this.baseUrl}/images/avatar/`
      let baseUrl2 = `${this.baseUrl}/images/avatar_1/`
      let brand = this.brandInfo.brand
      let url = `https://www.kamlung.net/images/qrlogo/wx-${brand}.png`
      this.boxItme = data.map((v, id) => {
        if (v?.u) {
          if (v?.a === '-') {
            return ({
              id: id + 1,
              ph: v.ph,
              u: `${baseUrl}${v.u}`,
            })
          } else {
            return ({ //虚拟
              id: id + 1,
              ph: v.ph,
              u: `${baseUrl2}${v.u}`,
            })
          }
        } else { //默认
          return ({
            id: id + 1,
            ph: v.ph,
            u: url,
          })
        }
      })
    },
    // 取消分享
    cancelShare() {
      this.isCreate = false
      this.showShare = false
    },
    onChange(e) {
      // console.log('e 倒计时:>> ', e);
      this.timeData = e
    },
    // 商品车型列表
    async getGoodsCarList(brand_id) {
      const {
        data: { data }
      } = await goodsCarListApi({ brand_id })
      // console.log(data);
      this.saveCarModelDataList(data)
    },
    ...mapMutations([
      'saveComIndex',
      'saveShoppCart',
      'saveGoodsOrder',
      'saveCarModelDataList',
      // 'saveOnOff',
      // 'savePathLink',
    ]),
    callSevise() {
      this.canvasShow()
      setTimeout(() => {
        this.$refs.mycanvas.canvasGet()
      }, 400)
      this.show = true
    },
    // 联系客服
    canvasShow() {
      let {
        name,
        qyQr_url,
        avatar_url,
        department
      } = this.serviceInfo
      let comName = this.currCompa.value
      let baseUrl = `${this.baseUrl}/images/audi/service/` // 头像
      this.posInfo = {
        textHead: `${name}`,
        imageHead: `${baseUrl}${avatar_url}`,
        imageBody: `${baseUrl}${qyQr_url}`,
        textRank: `@${comName}`,
        titleRank: `您好,我是${comName}的${department}`
      }
      let tempTimeOut = setTimeout(() => {
        this.$refs.mycanvas.init() //绘制画布
        clearTimeout(tempTimeOut)
      }, 80)
    },
    // 商品加入购物车
    async goodsAddCars() {
      let currComId = this.currComInfo?.id
      let { brand_id } = this.brandInfo
      let { id, images_kv, category_id1, shop_title, coupon_list, post_service, category_id2, company_id,
        present_price, limit_num_max, buyers_num_max, original_price, prepaid_price, customer_model } = this.compuGoodsDetail
      let reg = new RegExp(',', "g")
      let prepaid_price2 = prepaid_price.replace(reg, '')
      let present_price2 = present_price.replace(reg, '')

      // 商品类型列表
      const {
        data: { data }
      } = await getShopTypeCateListApi({
        brand_id,
        company_id: '',
        state: '1'
      })
      let type_name1 = ''
      for (let i = 0; i < data.length; i++) {
        if (data[i].category_id1 == category_id1) {
          type_name1 = data[i].type_name
          break
        }
      }
      // 是否券？
      let hasCoupon = false
      if (coupon_list && coupon_list != '[]') {
        hasCoupon = true
      }
      let temp = {
        num: 1,
        state: '',
        images_kv,
        shop_title,
        select: true,
        coupon_list,
        category_id2,
        goods_id: id,
        limit_num_max,
        buyers_num_max,
        customer_model,
        company_id: currComId,
        coupon: hasCoupon,
        service: post_service,
        type_name1: type_name1,
        origina: original_price,
        company_ids: company_id.split(",").map(Number),
        prepaid_rice: this.isPrepaidPrice ? true : false, // 是否订金
        price: this.isPrepaidPrice ? prepaid_price2 : present_price2, // 是否只付订金
      }
      this.saveGoodsOrder(temp)
      let curTime = { curTime: Date.parse(new Date()) }
      uni.setStorageSync('curTime', JSON.stringify(curTime))
      return false
    },
    // 点击加入购物车
    addCars() {
      let { id, limit_num_max } = this.goodsDetail
      let temp = this.goodsOrder.find(v => v.goods_id === id)
      if (!temp) {
        this.goodsAddCars()
      } else {
        if (limit_num_max && temp.num >= limit_num_max) {
          return uni.$showMsg(`该商品最多只能购买${limit_num_max}个`)
        } else {
          this.goodsAddCars()
        }
      }
      uni.$showMsg('商品添加购物车成功！')
      setTimeout(() => {
        uni.switchTab({
          url: `/pages/Shop/ShopAdmin`
        })
      }, 1000)
    },
    popupOper(v) {
      this.isShow = v
    },
    // 返回
    backShop() {
      let routes = getCurrentPages()
      if (routes.length < 2) {
        uni.switchTab({
          url: `/pages/Shop/ShopAdmin`
        })
      } else {
        uni.navigateBack({ delta: 1 })
      }
    },
    // 立即买
    onPurchase() {
      let indes = this.goodsOrder.findIndex(
        item => item.goods_id === this.goodsDetail.id
      )
      if (indes < 0) {
        this.goodsAddCars()
      }
      uni.navigateTo({
        url: `/Shop/GoodsPay`
      })
    },
    selectShare(e) {
      let index = e.detail.index
      this.isCreate = true
      switch (index) {
        case 0:
          uni.share({// 分享小程序
            provider: 'weixin',
            scene: 'WXSceneSession',
            type: 5,
            summary: '我正在浏览ZEEKR大礼包，赶紧跟我一起来体验！',
          })
          break
        default:
          // 保存到相册
          this.$refs.canvas.saveImage()
      }
    }
  },
  onLoad(options) {
    this.shareMixin.path = '/Shop/GoodsDetail'
    let param1 = {}
    // console.log('scene', param)
    if (options?.scene) {
      let param = decodeURIComponent(options.scene)
      // 解析url
      let temp = changeUrl(param)
      let { id, c } = temp
      console.log('temptemp', temp)
      this.getGoodsDetail(id, c)
      this.cOrId = { c, goodsId: id }
      this.goodsId = id
      param1 = {
        id,
        type: 'xx',
      }
    } else {
      let { p, c, id } = options
      // 商品详情
      this.getGoodsDetail(id, c)
      this.cOrId = { c, goodsId: id }
      this.goodsId = id
      param1 = { id }
      if (p) {
        param1 = {
          id,
          type: 'xx',
        }
      }
    }
    this.getklmxxFn(param1)
    if (!this.carModelDataList.length) {
      let { brand_id } = this.brandInfo
      // 车型数据
      this.getGoodsCarList(brand_id)
    }
  }
}
</script>
<style lang="scss">
.ql-align-center {
  text-align: center;
}
</style>
<style scoped lang="scss">
::v-deep .u-navbar--fixed {
  z-index: 96 !important;
}

@import '@/styles/mixins.scss';

.card {
  width: 95%;
  margin: 0 auto;
  padding: 20rpx 20rpx;
  background-color: #fff;
  // box-shadow: $theme-shadow;
}

.card-btm-radius {
  border-bottom-left-radius: 10rpx;
  border-bottom-right-radius: 10rpx;
}

.top-40 {
  position: relative;
  top: -40rpx;
}

.parse_box {
  margin: 0 auto;
  width: 95%;
  min-height: 300rpx;
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #fff;
}

.container {
  background-color: #f1f1f1;

  .top_img_box {
    width: 100%;
    height: 120vw;
    overflow: hidden;
    z-index: 0;

    .img {
      width: 100%;
      height: 100%;
    }
  }

  .info_box {
    z-index: 95 !important;
    position: relative;
    top: -80rpx;

    // 价格
    .price_info {
      display: flex;
      align-items: center;
      border-top-left-radius: 10rpx;
      border-top-right-radius: 10rpx;

      .price {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        .word {
          @include text-tag();
          margin-left: 4rpx;
          color: $theme-color;
          background-color: #fff;
          border: #f34c54 solid 1px;
        }

        .text {
          margin-left: -4rpx;
          font-weight: bold;
          font-size: 48rpx;
          box-sizing: border-box;

          .te {
            font-size: 34rpx;
          }
        }
      }

      .prepaid_price {
        margin-bottom: 4rpx;
        align-self: flex-end;
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .num {
          // color: $theme-color;
          // background-color: #fff;
          padding: 0 15rpx;
          border-radius: 25rpx;
          overflow: hidden;
          line-height: 48rpx;
          font-size: 28rpx;
        }
      }

      .original_box {
        margin-left: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .num {
          font-size: 24rpx;
          text-align: left;
          text-decoration: line-through;
        }
      }
    }

    .price_box--group {
      background-color: #f34c54;

      .price {
        color: #fafafa;

        .text {
          color: #fafafa;

          .te {
            font-size: 34rpx;
          }
        }

        .word {
          @include text-tag-light();
          color: #fff;
          border: #fff 1px solid;
          background-color: #f34c54;
        }
      }

      .prepaid_price {
        .num {
          color: $theme-color;
          background-color: #fff;
        }
      }

      .original_box {
        .word {
          @include text-tag-light();
          color: #fff;
          border: #fff 1px solid;
          background-color: #f34c54;
        }

        .num {
          color: #fafafa;
        }
      }
    }

    .price_box {
      color: $theme-color;

      .original_box {
        .num {
          color: #999;
        }

        .word {
          @include text-tag();
        }
      }

      .prepaid_price {
        .num {
          color: #fff;
          background-color: $theme-color;
        }
      }
    }

    // 倒计时
    .count-down {
      margin-left: auto;

      &__title {
        text-align: center;
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
        color: #fafafa;
      }

      &__tips {
        text-align: center;
        font-size: 32rpx;
        font-weight: 600;
        // margin-bottom: 10rpx;
        color: #fafafa;
        // color: #222;
      }

      .time {
        display: flex;
        align-items: center;

        &__custom {
          margin: 4px 5px 0 5px;
          width: 38rpx;
          height: 38rpx;
          background-color: #fafafa;
          border-radius: 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          &__item {
            color: #de4141;
            font-size: 20rpx;
            text-align: center;
          }
        }

        &__item {
          color: #606266;
          font-size: 15px;
          margin-right: 4px;
        }
      }
    }

    .title {
      padding-bottom: 20rpx;
      line-height: 50rpx;
      color: #222;
      font-weight: 600;
      font-size: 40rpx;
    }

    .server {
      line-height: 48rpx;
      font-size: 28rpx;
      color: #555;

      .server_post {
        @include text-tag-light();
        margin: 0 4rpx;
      }
    }

    .prepaid-price {
      line-height: 48rpx;
      font-size: 28rpx;
      color: #de4141;
    }

    .coupon_box {
      display: flex;

      .coupon_title {
        width: 60px;
        flex-shrink: 0;
        flex-grow: 0;
      }

      .coupon_info {
        flex: 1;

        .content {
          font-size: 25rpx;
        }
      }
    }
  }
}

// 倒计时
.schedule {
  width: 95%;
  margin: 0 auto;
  top: -40rpx;
  // margin-bottom: 30rpx;
  padding: 0 24rpx 24rpx 24rpx;
  position: relative;
  background-image: linear-gradient(90deg, #fff8ef, #fff);

  &__title {
    text-align: center;
    font-size: 36rpx;
    font-weight: 600;
    line-height: 98rpx;
    color: #ec8629;
  }

  &__data {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &__num {
      font-size: 26rpx;
      font-weight: 600;
      line-height: 50rpx;
      margin-bottom: 30rpx;
      color: #ec8629;
    }
  }

  &__date {
    padding-left: 10rpx;
    line-height: 50rpx;
    font-size: 26rpx;

    border: 1px solid #ec8629;
    color: #ec8629;
  }
}

.video_box {
  margin-bottom: 34rpx !important;
  text-align: center;

  .videoSytle {
    width: 100%;
    border-radius: 0;
  }
}

// 分享组件
::v-deep .van-share-sheet__options {
  justify-content: space-around;
}

.bottom-btn {
  position: fixed;
  width: 100%;
  // padding-bottom: 30rpx;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 97;
  // line-height: 80rpx;
  font-size: 30rpx;
  font-weight: 600;
  text-align: center;
  background-color: #fff;

  &__share {
    width: 160rpx;
    border-top: #ddd solid 1px;
    font-size: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #f6f6f6;
  }

  &__addCar {
    background-color: $theme-color;
    // line-height: 80rpx;
    line-height: 110rpx;
    flex: 1;
    color: #fafafa;
  }

  &__purchase {
    border-left: #f38484 solid 1px;
    line-height: 110rpx;
    background-color: $theme-color;
    flex: 1;
    color: #f1f1f1;
  }

  &__end {
    flex: 1;
    line-height: 110rpx;
    background-color: #999;
    color: #fafafa;
  }
}

::v-deep .ql-align-left {
  text-align: left;
}

::v-deep .ql-align-center {
  text-align: center;
}

::v-deep .ql-align-right {
  text-align: right;
}

.popup_inner {
  padding: 50rpx 40rpx 20rpx 40rpx;
}

// 客服
.Contact {
  width: 80rpx;
  height: 80rpx;
  // position: absolute;
  // top: 30rpx;
  position: fixed;
  right: 30rpx;
  // right: 30px;
  bottom: 200rpx;
  z-index: 9999;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fafafa;

  .iconfont2 {
    font-size: 42rpx;
  }

  .text {
    font-size: 18rpx;
  }
}

// 成交提醒
.swiper-wrap {
  width: 400rpx;
  position: fixed;
  left: 20rpx;
  bottom: 130rpx;
  z-index: 99;
  opacity: 0.88;

  .swiper {
    .hide {
      opacity: 0;
    }

    .item-box {
      display: flex;
      align-items: center;
      text-align: center;
      line-height: 38rpx;
      // font-size: 20rpx;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 0 8rpx;
      border-radius: 60rpx;
      color: #fafafa;
      display: inline-flex;

      .img-box {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        overflow: hidden;
        background-color: #fff;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        font-size: 19rpx;
        margin-left: 10rpx;
      }
    }
  }

  .mask {
    z-index: 100;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
